<template>
  <view class="classList">
    <view class="loadingLayout" v-if="!classList.length && !noData">
      <uni-load-more status="loading"></uni-load-more>
    </view>
    <view class="content">
      <navigator :url="`/pages/preview/preview?id=${it._id}`" class="item" v-for="it in classList" :key="it._id">
        <image :src="it.smallPicurl" mode="aspectFill"></image>
      </navigator>
    </view>
    <view class="loadingLayout" v-if="classList.length || noData">
      <uni-load-more :status="noData ? 'noMore' : 'loading'"></uni-load-more>
    </view>
    <view class="safe-area-inset-bottom"></view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad, onUnload, onReachBottom, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
  import { apiGetClassList, apiGetHistoryList } from '@/api/apis.js'
  import { gotoHome } from '@/utils/common.js'

  const queryParams = { pageNum: 1, pageSize: 12 }
  let pageName
  const noData = ref(false)
  onLoad(e => {
    let { id = null, name = null, type = null } = e
    if (type) queryParams.type = type
    if (id) queryParams.classid = id
    //if (!id) gotoHome()
    pageName = name
    uni.setNavigationBarTitle({ title: name })
    getClassList()
  })

  onReachBottom(() => {
    if (noData.value) return
    queryParams.pageNum++
    getClassList()
  })

  const classList = ref([])
  const getClassList = async () => {
    let res
    if (queryParams.classid) res = await apiGetClassList(queryParams)
    if (queryParams.type) res = await apiGetHistoryList(queryParams)

    if (queryParams.pageNum == 1) classList.value = []
    classList.value = [...classList.value, ...res.data]
    uni.setStorageSync('storeClassList', classList.value)
    if (queryParams.pageSize > res.data.length) noData.value = true
  }

  //分享给好友
  onShareAppMessage(e => {
    return {
      title: `咸虾米壁纸 ${pageName}`,
      path: `/pages/classlist/classlist?id=${queryParams.classid}&name=${pageName}`,
    }
  })

  //分享朋友圈
  onShareTimeline(e => {
    return {
      title: '咸虾米壁纸~~~',
      query: `id=${queryParams.classid}&name=${pageName}`
    }
  })

  onUnload(() => {
    uni.removeStorageSync('storeClassList')
  })
</script>

<style lang="scss" scoped>
  .classList {
    .content {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5rpx;
      padding: 5rpx;

      .item {
        height: 440rpx;

        image {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
  }
</style>